<div class="container">
    <div class="logoDiv">
      <div>
        <img class="logoImg" src="assets/images/login_logo.png" alt="logo">
      </div>
      <div style="text-align:right;">
        <img class="logoImg2" src="assets/images/chahua.png" alt="logo">
      </div>
    </div>
    
    <div class="login_div">
      <div class="form-div">
          <div class="top-login">忘记密码</div>
          <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
            <nz-form-item>
              <nz-form-control>
                <div nz-row [nzGutter]="8">
                    <div nz-col [nzSpan]="24">
                      <nz-input-group [nzPrefix]="prefixUser">
                        <input type="text" nz-input formControlName="username" (focus)="cancelErrorTips()" #username placeholder="请输入账号">
                      </nz-input-group>
                    </div>
                    <div nz-col [nzSpan]="8" style="margin-left:-116px;">
                        <nz-form-explain style="margin-top:9px;" *ngIf="validateForm.get('username').dirty && validateForm.get('username').errors">请输入账号!</nz-form-explain>
                    </div>
                </div>
              </nz-form-control>
            </nz-form-item>

            <nz-form-item>
              <nz-form-control [nzSm]="24" [nzXs]="24" [nzValidateStatus]="validateForm.controls['phoneNumber']">
                <div nz-row [nzGutter]="8">
                    <div nz-col [nzSpan]="24">
                      <nz-input-group [nzAddOnBefore]="addOnBeforeTemplate">
                        <ng-template #addOnBeforeTemplate>
                          <nz-select formControlName="phoneNumberPrefix" style="width: 70px;">
                            <nz-option nzLabel="+86" nzValue="+86"></nz-option>
                            <nz-option nzLabel="+87" nzValue="+87"></nz-option>
                          </nz-select>
                        </ng-template>
                        <input nz-input type="text" formControlName="phoneNumber" id="'phoneNumber'" (blur)="checkMobile()" (focus)="clearCheckMobile()" (focus)="cancelErrorTips()" #phoneNumber placeholder="请输入绑定的手机号">
                      </nz-input-group>
                    </div>
                    <div nz-col [nzSpan]="8" style="margin-left:-116px;">
                        <nz-form-explain style="margin-top: 9px;" *ngIf="validateForm.get('phoneNumber').dirty && validateForm.get('phoneNumber').errors">
                          <ng-container *ngIf="validateForm.get('phoneNumber').hasError('required')">
                              请输入手机号!
                          </ng-container>
                          <ng-container *ngIf="validateForm.get('phoneNumber').hasError('confirm')">
                              手机号不正确!
                          </ng-container>
                        </nz-form-explain>
                    </div>
                </div>
              </nz-form-control>
            </nz-form-item>

            <nz-form-item>
              <nz-form-control [nzSm]="24" [nzXs]="24">
                <div nz-row [nzGutter]="8">
                  <div nz-col [nzSpan]="16">
                    <div nz-col [nzSpan]="24">
                      <input nz-input formControlName="captcha" id="captcha" (blur)="checkCaptcha($event)" (focus)="focusCheck()" #captcha placeholder="请输入验证码">
                    </div>
                    <div nz-col [nzSpan]="11" style="margin-left:-105px;">
                        <nz-form-explain style="margin-top:9px;" *ngIf="validateForm.get('captcha').dirty && validateForm.get('captcha').errors">请输入验证码!</nz-form-explain>
                        <nz-form-explain style="margin-top:9px;" class="checkSuccess" *ngIf="checkCaptchaCode==1">验证码正确!</nz-form-explain>
                        <nz-form-explain style="margin-top:9px;" class="checkResult" *ngIf="checkCaptchaCode==-1">验证码错误!</nz-form-explain>
                    </div>
                  </div>
                  <div nz-col [nzSpan]="8">
                    <button [nzSize]="'large'" nz-button (click)="getCaptcha(username.value,phoneNumber.value)">{{captchaBtn}}</button>
                  </div>
                </div>
              </nz-form-control>
            </nz-form-item>

            <nz-form-item>
              <nz-form-control>
                <div nz-row [nzGutter]="8">
                    <div nz-col [nzSpan]="24">
                      <nz-input-group [nzPrefix]="prefixLock">
                        <input type="text" nz-input formControlName="password" #password placeholder="请重设密码">
                      </nz-input-group>
                    </div>
                    <div nz-col [nzSpan]="8" style="margin-left:-116px;">
                      <nz-form-explain style="margin-top:9px;" *ngIf="validateForm.get('password').dirty && validateForm.get('password').errors">请输入密码!</nz-form-explain>
                    </div>
                </div>
              </nz-form-control>
            </nz-form-item>

            <nz-form-item *ngIf="errorTips">
                <nz-form-control class="errorTips">
                    {{errorTips}}
                </nz-form-control>
            </nz-form-item>

            <nz-form-item style="margin:12px 0;padding-bottom:12px;">
              <nz-form-control>
                <button nz-button class="login-form-button" [nzLoading]="btn_loading" [nzSize]="'large'" [nzType]="'primary'" (click)="forgetPwd()">提    交</button>
                <a href="" routerLink="/login" style="float:left;">去登录</a>
              </nz-form-control>
            </nz-form-item>
          </form>
          <ng-template #prefixUser><i nz-icon type="user"></i></ng-template>
          <ng-template #prefixLock><i nz-icon type="lock"></i></ng-template>
      </div>
    </div>
    <div class="footer">
        智管印打印服务管理平台
    </div>
</div>